<template>
  <div>
    <!-- Header 区域 -->
    <van-nav-bar fixed title="文章详情" left-arrow @click-left="$router.back()" />
   <van-loading size="24px" color="#1989fa"  v-if="Object.keys(articleObj).length === 0">加载中...   </van-loading>
    <div v-else>
      <!-- 文章信息区域 -->
      <div class="article-container">
        <!-- 文章标题 -->
        <h1 class="art-title">{{articleObj.title}}</h1>

        <!-- 用户信息 -->
        <!-- <van-cell center :title="articleObj.aut_name" :label="formatter(articleObj.pubdate)"> -->
        <van-cell center title="测试" :label="formatter(articleObj.pubdate)">
          <template #icon>
            <img :src="articleObj.aut_photo" alt="" class="avatar">
          </template>
          <template #default>
            <div>
              <van-button type="info" size="mini" v-if="articleObj.is_followed" @click="followedFn(true)">已关注</van-button>
              <van-button icon="plus" type="info" size="mini" plain v-else @click="followedFn(false)">关注</van-button>
            </div>
          </template>
        </van-cell>

        <!-- 分割线 -->
        <van-divider></van-divider>

        <!-- 文章内容 -->
        <div class="art-content" v-html="articleObj.content"></div>

        <!-- 分割线 -->
        <van-divider>End</van-divider>

        <!-- 点赞 -->
        <!-- 用户对文章的态度, -1: 无态度，0-不喜欢，1-点赞	 -->
        <div class="like-box">
          <van-button icon="good-job" type="danger" size="small" v-if="articleObj.attitude === 1" @click="likeFn(true)">已点赞</van-button>
          <van-button icon="good-job-o" type="danger" plain size="small" v-else @click="likeFn(false)">点赞</van-button>
        </div>
      </div>
        <!-- 评论区域 -->
        <div>
          <CommentList :source="$route.query.article_id" :articleObj="articleObj" type="a" @updateStartStatus="updateStartStatusFn"/>
        </div>
    </div>

  </div>
</template>

<script>
  import CommentList from './comment.vue'
  import {timeAgo} from '../../utils/dayformate.js'
  import {detailApi,followedauthorApi,unfollowedauthorApi,likeApi,unLikeApi} from '../../api/index.js'
  export default {
    name: 'articleDetail',
    data(){
      return{
        articleObj:{} // 存放文章详情信息
      }
    },
    created(){
      this.getDetail()
    },
    methods:{
      // 获取文章详情api
      async getDetail(){
       try{
         let {data:res} = await detailApi(this.$route.query)
         this.articleObj = res.data
         console.log(res)
       }catch(e){
         console.log(e)
       }
      },
      // 格式化时间(复制操作)
      formatter:timeAgo,
      // 点击关注/取关事件
      async followedFn(followedStatus){
        if(followedStatus){
          // 此时点击了关注按钮 > 变成取关
          this.articleObj.is_followed = false
          let {data:res} = await unfollowedauthorApi(this.articleObj.aut_id)
        }else{
           // 此时点击了取关按钮 > 变成关注
           this.articleObj.is_followed = true
           let res = await followedauthorApi(this.articleObj.aut_id)
           console.log(res)
        }
      },
      // 点赞文章/取消点赞
      async likeFn(likeState){
        if(likeState){
          // 此时状态是已点赞 > 取消点赞
          this.articleObj.attitude = 0
          let data = await unLikeApi(this.articleObj.art_id)
        }else{
          // 此时状态是未点赞 > 点赞
          this.articleObj.attitude = 1
          let data = await likeApi(this.articleObj.art_id)
        }
      },
      // 接受子组件自定义事件
      updateStartStatusFn(val){
        this.articleObj.is_collected = val
      },
      //
      replyClick(comment){
        console.log(comment,'comment')
      }
    },
    mounted(){
      // 接收评论组件传递的自定义事件,接收评论对象
      // this.$bus.$on('replyClick', comment => {
      //   console.log(comment,'comment对象')
      // })
    },
    components:{
      CommentList
    }
  }
</script>

<style scoped lang="less">
  .van-loading{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
   .article-container {
     padding: 10px;
     margin-top: 46px;
   }
   .art-title {
     font-size: 16px;
     font-weight: bold;
     margin: 10px 0;
   }

   .art-content {
     font-size: 12px;
     line-height: 24px;
     width: 100%;
     overflow-x: scroll;
     word-break: break-all;
       /deep/ img{
       	width: 100%;
     	}
       /deep/ pre {
           white-space: pre-wrap;
           word-wrap: break-word;
       }
   }

   .van-cell {
     padding: 5px 0;
     &::after {
       display: none;
     }
   }

   .avatar {
     width: 60px;
     height: 60px;
     border-radius: 50%;
     background-color: #f8f8f8;
     margin-right: 5px;
     border: none;
   }

   .like-box {
     display: flex;
     justify-content: center;
   }
   /deep/.van-nav-bar .van-icon {
     color: white;
   }
   </style>
